<template>
  <div class="message-wrapper">
    <div class="bim-drawer" :class="!visible ? '' : 'bim-drawer-open'">
      <div class="bim-drawer-mask"></div>
      <div class="bim-drawer-right">
          <div class="bim-drawer-content-wrapper site-base-bg">
            <div class="bim-drawer-content">
              <div class="bim-drawer-wrapper-body">
                <div class="bim-drawer-body">
                  <div class="main-content-drawer">
                    <div class="mess-monitor">
                      <div class="line-block-placeholder"></div>
                      <div class="header-block">
                        <h3 class="box-title">消息中心</h3>
                      </div>
                      <div class="main-list" v-loading="listLoading">
                        <div id="mainArea" class="alarm-messages layout-info" @scroll="dropLoad">
                          <div class="alarm-meta" v-for="item in dataList" :key="item.id">
                            <div class="alarm-meta-detail">
                              <h3 class="alarm-meta-title">{{item.event_msg}}</h3>
                              <div class="alarm-meta-description">
                                <span class="datetime">{{item.created_at}}</span>
                              </div>
                              <div class="alarm-meta-opt">
                                <!--<button class="bim-btn bim-btn-handle" @click="sendMessage(item.id, index)" v-if="item.event_state === 1">处理</button>-->
                                <!--<button class="bim-btn bim-btn-handle" @click="sendMessage(item.id, index, 'done')" v-if="item.event_state === 2">完成</button>-->
                                <!--<button class="bim-btn bim-btn-handle" v-if="item.event_state === 3" disabled>已完成</button>-->
                                <!--<button class="bim-btn bim-btn-ignore" @click="ignoreConfirm(item.id, index)" v-if="item.event_state === 1">忽略</button>-->
                                <!--<button class="bim-btn bim-btn-ignore" v-if="item.event_state === 4" disabled>已忽略</button>-->
                                <!--<button class="bim-btn bim-btn-scene" @click="dialogLiveVisible = true">现场</button>-->
                                <button class="bim-btn bim-btn-scene" @click="showDialog(item.pic_url)">查看</button>
                              </div>
                            </div>
                            <div class="alarm-meta-pic">
                              <img :src="item.pic_url" alt="">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="line-block-placeholder"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogLiveVisible" :append-to-body="true" :show-close="false" custom-class="bim-dialog">
      <img :src="magnifierSrc" alt="">
      <!--<video-player-->
        <!--class="vjs-custom-skin"-->
        <!--:options="playerOptions">-->
      <!--</video-player>-->
    </el-dialog>
    <!--<el-dialog title="请选择发送短信组（可多选）" :visible.sync="dialogTypeVisible" :append-to-body="true" custom-class="mess-dialog" width="600px" center="center" @close="dialogClose">-->
      <!--<div class="user-group">-->
        <!--<input type="hidden" v-model="currentID" value="currentID">-->
        <!--<div class="lbl-item" ref="reportGroup">-->
          <!--<label class="checkbox-control" v-for="item in reportGroups" :key="item.id">-->
            <!--<input type="checkbox" name="mess-type" class="control-input" v-model="reportGroupsIpt">{{item.name}}-->
          <!--</label>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="user-group-opt">-->
        <!--<button class="bim-btn bim-btn-send" @click="sendMessage">发送短信</button>-->
      <!--</div>-->
    <!--</el-dialog>-->
  </div>
</template>
<script>
export default {
  data () {
    return {
      playerOptions: {
        autoplay: true,
        height: '280',
        controls: false,
        sources: [{
          withCredentials: false,
          type: 'application/x-mpegURL',
          src: 'http://rtmp1.sadpu.com/hls/hls0.m3u8'
        }],
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        flash: {
          hls: {
            withCredentials: false
          }
        },
        html5: {
          hls: {
            withCredentials: false
          }
        },
        poster: 'http://demo-dev.sadpu.com/uploads/media/logo_v3.png',
        interval: null
      },
      dialogLiveVisible: false,
      dialogTypeVisible: false,
      visible: false,
      dataList: [],
      page: 1,
      reportGroups: [],
      reportGroupsIpt: [],
      currentID: 0,
      listLoading: true,
      magnifierSrc: null
    }
  },
  created () {
    const _self = this
    _self.freshPost()
    _self.interval = setInterval(() => {
      if (!_self.visible) {
        _self.visible = true
      }
      clearInterval(_self.interval)
    }, 500)
  },
  beforeDestroy () {
    if (this.interval) {
      clearInterval(this.interval)
    }
  },
  methods: {
    freshPost () {
      const _self = this
      _self.listLoading = true
      this.$http.get('/api/report').then((response) => {
        _self.dataList = response.data.data
        _self.listLoading = false
      }, err => {
        this.$message({
          type: 'info',
          message: '操作失败!' + err
        })
      })
    },
    dropLoad () {
      const _self = this
      const el = document.getElementById('mainArea')
      const marginBot = el.scrollHeight - (el.scrollTop + document.body.scrollTop) - el.clientHeight
      if (marginBot <= 1) {
        _self.page += 1
        const page = _self.page
        const args = {
          page: page
        }
        _self.listLoading = true
        this.$http.get('/api/report', { params: args }).then(response => {
          _self.dataList = _self.dataList.concat(response.data.data)
          _self.listLoading = false
        }, err => {
          this.$message({
            type: 'info',
            message: '操作失败!' + err
          })
        })
      }
    },
    ignoreConfirm (data, index) {
      this.$confirm('此操作将忽略此报警信息?', '提示', {
        confirmButtonText: '忽略',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let args = {
          report_id: data
        }
        this.$http.post('/api/report/ignore', args).then(response => {
          if (response.data.state === 'success') {
            this.dataList[index].event_state = 4
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          } else {
            this.$message({
              type: 'info',
              message: '操作失败!'
            })
          }
        }, err => {
          this.$message({
            type: 'info',
            message: '操作失败!' + err
          })
        })
      })
    },
    sendMessage (data, index, type) {
      let msg = type === 'done' ? '此报警信息是否处理完成?' : '此操作将处理此报警信息?'
      let state = type === 'done' ? 3 : 2

      this.$confirm(msg, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let args = {
          report_id: data
        }
        this.$http.post('/api/report/deal', args).then(response => {
          if (response.data.state === 'success') {
            this.dataList[index].event_state = state
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          } else {
            this.$message({
              type: 'info',
              message: '操作失败!'
            })
          }
        }, err => {
          this.$message({
            type: 'info',
            message: '操作失败!' + err
          })
        })
      })
      // console.log(this.reportGroupsIpt)
    },
    dialogClose () {
      this.reportGroupsIpt = []
    },
    showDialog (src) {
      this.dialogLiveVisible = true
      this.magnifierSrc = src
    }
  }
}
</script>
<style lang="scss">
.mess-dialog{
  background-color: rgba($color: #284a71, $alpha: 0.7);
  .el-dialog__title {
    color: #cde9ff;
  }
}
</style>
